<template>
  <span>
    <!--<el-button class="filter-item" type="primary" size="mini" style="float:right;margin-bottom:5px;margin-left:0px;" round @click="doClearSelection">取消选择</el-button>-->
    <el-table
      ref="itemTab"
      :data="parent.data"
      :row-key="getRowKeys"
      stripe
      size="small"
      border
      style="width: 100%;"
      round
      @sort-change="sortChange"
      @selection-change="handleSelectionChange"
      @header-dragend="parent.colChange"
    >
      <el-table-column :reserve-selection="true" type="selection" align="center" width="55" />
      <el-table-column v-if="parent.changeType === 5" :show-overflow-tooltip="true" sortable="custom" label="流水号" prop="vendorPortalId" :width="parent.colWidths.vendorPortalId" />
      <el-table-column :show-overflow-tooltip="true" label="商品号" prop="itemNbr" :width="parent.colWidths.itemNbr">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="toItemInfo(scope.row)">{{ getValue(scope.row,'itemNbr') }}</el-button>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" label="部门" prop="deptNbr" :width="parent.colWidths.deptNbr">
        <template slot-scope="scope">{{ getValue(scope.row,'deptNbr') }}</template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" label="商品说明1" prop="item1Desc" :width="parent.colWidths.item1Desc">
        <template slot-scope="scope">{{ getValue(scope.row,'item1Desc') }}</template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" label="供应商之商品代码" prop="vendorStockId" :width="parent.colWidths.vendorStockId">
        <template slot-scope="scope">{{ getValue(scope.row,'vendorStockId') }}</template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" label="供应商编号" prop="vendorNbr" :width="parent.colWidths.vendorNbr">
        <template slot-scope="scope">{{ getValue(scope.row,'vendorNbr') }}</template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" label="供应商名称" prop="vendorName" :width="parent.colWidths.vendorName">
        <template slot-scope="scope">{{ getValue(scope.row,'vendorName') }}</template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" sortable="custom" label="上传时间" prop="syncTime" :width="parent.colWidths.syncTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.syncTime) }}</span>
        </template>
      </el-table-column>
      <itemStatusForm />
      <el-table-column :show-overflow-tooltip="true" sortable="custom" label="最近修改时间" prop="updatedTime" :width="parent.colWidths.updatedTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updatedTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="warning" @click="toItemInfo(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-pagination
      :total="parent.total"
      :current-page.sync="parent.currentPage"
      :page-sizes="[10,50,100,500]"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="parent.sizeChange"
      @current-change="parent.pageChange"
    />
  </span>
</template>
<script>
import itemStatusForm from '@/views/part/itemStatus'
import { parseTime } from '@/utils/index'
export default {
  components: { itemStatusForm },
  props: {
    parent: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      syncTime: []
    }
  },
  methods: {
    parseTime,
    getValue(row, key) { // 获取信息
      if (row === undefined || row === null || key === undefined || key === null || key === '') {
        return ''
      }
      if (row.itemInfo === undefined || row.itemInfo === null) {
        return ''
      }
      var item = JSON.parse(row.itemInfo)
      if (item === null) {
        return ''
      }
      return item[key]
    },
    // 上传时间日期组件触发
    syncTimeChange(val) {
      this.parent.params.findSyncTimeStartDate = val[0]
      this.parent.params.findSyncTimeEndDate = val[1]
    },
    toItemInfo(row) {
      this.parent.toItemInfo(row)
    },
    // 列表排序触发
    sortChange(val) {
      let sortType = ''
      if (val.order === 'descending') {
        sortType = ' DESC'
      } else if (val.order === 'ascending') {
        sortType = ' ASC'
      }
      this.parent.params.sort = val.prop + sortType
      this.parent.init()
    },
    // 列表多选框触发
    handleSelectionChange(val) {
      this.parent.ids = []
      val.forEach(item => {
        this.parent.ids.push(item.id)
        if (this.parent.buyerId !== undefined) {
          this.parent.buyerId = item.buyerId
        }
      })
    },
    // 翻页选择row的key值
    getRowKeys(row) {
      return row.id
    },
    // 清空选择项
    doClearSelection() {
      this.$refs.itemTab.clearSelection()
    },
    // 查询栏重置触发
    resetForm() {
      this.parent.params = {}
      this.syncTime = []
    }
  }
}
</script>
